<template>
  <view class="filter-item">
    <text class="font-item-text">{{ title }}</text>
    <view class="uni-input" @click="toggle">
      <text class="font-item-value">{{ formattedTemporaryValue }}</text>
      <uni-icons type="arrowright" size="20" class="icon"></uni-icons>
    </view>
  </view>
  <uni-popup ref="popup" background-color="#fff">
    <view class="popup-title">
      <text class="font-no" @click="cancelSelection">取消</text>
      <text class="font-checkbox">支持多项选择</text>
      <text class="font-yes" @click="confirmSelection">确认</text>
    </view>
    <view class="popup-box">
      <checkbox-group :value="temporaryValue" @change="handleCheckboxChange" class="checkbox-group">
        <label v-for="(item, index) in items" :key="index">
          <checkbox :value="item" :checked="temporaryValue.includes(item)" />
          <text class="popup-text">{{ item }}</text>
        </label>
      </checkbox-group>
    </view>
  </uni-popup>
</template>

<script setup lang="ts">
import { ref, computed, defineProps, defineEmits, watch } from 'vue'

const props = defineProps({
  title: {
    type: String,
    default: '内容展示',
  },
  items: {
    type: Array,
    default: () => ['内容1', '内容2', '内容3'],
    required: true,
  },
  value: {
    type: Array,
    default: () => [],
    required: true,
  },
})

const emit = defineEmits(['update:value', 'changeCheckbox', 'changePet', 'changeHobby'])

const popup = ref()
const temporaryValue = ref([...props.value])

const formattedValue = computed(() => {
  return props.value.join(', ')
})

const formattedTemporaryValue = computed(() => {
  return temporaryValue.value.join(', ')
})

// 监听父组件传递的 value 属性，当其变化时，同步更新临时值
watch(
  () => props.value,
  (newValue) => {
    temporaryValue.value = [...newValue]
  },
)

const toggle = () => {
  uni.setStorageSync({ 'formData.marriageValue': [] })
  let formData = uni.getStorageSync('formData')
  temporaryValue.value.filter((item) => {
    formData.marriageValue
  })
  console.log(formData.marriageValue)

  uni.setStorageSync({ formData: formData })
  popup.value.open('bottom')
}

const confirmSelection = () => {
  emit('update:value', temporaryValue.value)
  // uni.setStorageSync({ ''})
  popup.value.close()
}

const cancelSelection = () => {
  temporaryValue.value = [...props.value]
  popup.value.close()
  uni.showToast({
    title: '您点击了取消',
    icon: 'error',
  })
}

const handleCheckboxChange = (event: any) => {
  // const user = uni.getStorageSync('formData')
  // console.log(user);
  // if (user) {
  //   user['checkbox'] = event.detail.value
  //   uni.setStorageSync('formData', user)
  // }
  // console.log(event.detail.value);
  temporaryValue.value = event.detail.value
  console.log(temporaryValue.value)
  emit('changeCheckbox', temporaryValue.value)
}
</script>

<style lang="scss" scoped>
.popup-box,
.popup-title {
  padding: 0 3%;
}

.popup-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 7vh;
  border-bottom: 1px solid #eee;
  margin-bottom: 3vh;
}

.font-yes {
  font-size: 1rem;
  color: rgb(38, 176, 188);
}

.font-checkbox {
  font-size: 1rem;
  font-weight: 400;
}

.font-no {
  font-size: 0.9rem;
  color: #ccc;
}

.checkbox-group {
  min-height: 30vh;
  display: flex;
  flex-wrap: wrap;

  label {
    width: 45%;
    margin: 0.1rem 0.5rem;
    display: flex;
    align-items: center;
    font-weight: 400;
    font-size: 1rem;

    .popup-text {
      margin-left: 0.5rem;
    }
  }
}

.uni-input {
  display: flex;
  align-items: center;
}

.icon {
  color: #ccc;
  margin-left: 1vw;
}

.filter-item {
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  margin-bottom: 2vh;
  padding: 1vh 0;
  width: 84.5vw;
}

.font-item-text {
  color: #6e7073;
  font-size: 3vw;
}

::v-deep element.style {
  width: 100%;
}
</style>
